<template>
    <div class="enterpriseregist">
        <div class="enterpriseregistCon">
            <div class="bgDiv">
                <div class="leftCon">
                    <div class="leftCon_title">
                        <div></div>
                        <div>单位认证注册</div>
                        <div>
                            已有账号？
                            <span @click="$router.push('/login')">快速登录</span>
                        </div>
                    </div>
                    <div class="leftCon_steps">
                        <Steps :current="isShow">
                            <Step title="创建账号"></Step>
                            <Step title="填写单位资料"></Step>
                            <Step title="经办人信息"></Step>
                            <Step title="等待处理"></Step>
                        </Steps>
                    </div>
                    <div class="leftCon_content">
                        <div v-if="isShow == 0" class="leftCon_contentDiv">
                            <Form :model="form" :rules="rulesForm" label-position="right" ref="form" :label-width="100">
                                <FormItem label="手机号" prop="mobile" :error="errorMobile">
                                    <Input v-model="form.mobile" size="large" clearable placeholder="请输入您的手机号" autocomplete="off" />
                                </FormItem>
                                <FormItem label="验证码" prop="code">
                                    <Input v-model="form.code" placeholder="请输入短信验证码" style="width: 470px" />
                                    <Button style="width: 93px" @click="showVaptcha">获取验证码</Button>
                                </FormItem>
                                <FormItem label="密码" prop="password">
                                    <SetPassword size="large" v-model="form.password" />
                                </FormItem>
                                <FormItem label="确认密码" prop="copyPwd">
                                    <SetPassword size="large" v-model="form.copyPwd" />
                                </FormItem>
                                <FormItem>
                                    <Checkbox v-model="readUserAgree" @on-change="changeCheck">
                                        <span>我已同意,并遵守</span>
                                    </Checkbox>
                                    <div class="readUserAgree" style="display: inline" @click="biyes">《河南省大中专毕业生24365就业平台》</div>
                                </FormItem>
                                <FormItem>
                                    <Button :loading="loading" style="width: 100%" type="primary" @click.native="getList" size="large">立即注册</Button>
                                </FormItem>
                            </Form>
                        </div>
                        <div v-else-if="isShow == 1" class="leftCon_contentDiv">
                            <Form :model="formCompanyMes" :rules="rulesFormCom" label-position="right" :label-width="105">
                                <FormItem style="margin-left: 220px">
                                    <Avatar v-model="formCompanyMes.avatar" icon="ios-person" size="75" />
                                    <Upload :action="uploadFileUrl">
                                        <Button icon="ios-cloud-upload-outline">上传</Button>
                                    </Upload>
                                </FormItem>
                                <FormItem label="单位名称" prop="name">
                                    <Input v-model="formCompanyMes.name" size="large" clearable placeholder="与营业执照单位名称保持一致" autocomplete="off" />
                                </FormItem>
                                <FormItem label="统一社会信用代码" prop="codeNum">
                                    <Input v-model="formCompanyMes.codeNum" size="large" clearable placeholder="请输入统一社会信用代码" autocomplete="off" />
                                </FormItem>
                                <FormItem label="单位所属行业" prop="selectItem">
                                    <Select maxlength="100" v-model="formCompanyMes.comIndustry" filterable clearable>
                                        <Option v-for="item in comIndustryList" :value="item.code">{{ item.displayName }}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="网签所属行业" prop="selectItem">
                                    <Select maxlength="100" v-model="formCompanyMes.NetsignedIndustry" filterable clearable>
                                        <Option v-for="item in NetsignedIndustryList" :value="item.code">{{ item.displayName }}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="业务涉及领域" prop="selectItem">
                                    <Select maxlength="100" v-model="formCompanyMes.BusinesArea" filterable clearable>
                                        <Option v-for="item in BusinesAreaList" :value="item.code">{{ item.displayName }}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="单位类型" prop="selectItem">
                                    <Select maxlength="100" v-model="formCompanyMes.UnitType" filterable clearable>
                                        <Option v-for="item in UnitTypeList" :value="item.code">{{ item.displayName }}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="单位性质" prop="selectItem">
                                    <Select maxlength="100" v-model="formCompanyMes.UnitNature" filterable clearable>
                                        <Option v-for="item in UnitNatureList" :value="item.code">{{ item.displayName }}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="员工数量" prop="NumEmploye">
                                    <Input v-model="formCompanyMes.NumEmploye" size="large" clearable placeholder="请输入员工数量" autocomplete="off" />
                                </FormItem>
                                <FormItem label="单位所在区" prop="selectItem">
                                    <Select maxlength="50" v-model="formCompanyMes.UnitNature" filterable clearable>
                                        <Option v-for="item in UnitNatureList" :value="item.code">{{ item.displayName }}</Option>
                                    </Select>
                                    <Select maxlength="50" v-model="formCompanyMes.UnitNature" filterable clearable>
                                        <Option v-for="item in UnitNatureList" :value="item.code">{{ item.displayName }}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="详细地址" prop="address">
                                    <Input v-model="formCompanyMes.address" size="large" clearable placeholder="请输入详细地址" autocomplete="off" />
                                </FormItem>
                                <FormItem label="公司官网" prop="netAddress">
                                    <Input v-model="formCompanyMes.netAddress" size="large" clearable placeholder="请输入公司官网" autocomplete="off" />
                                </FormItem>
                                <FormItem label="公司简介" prop="introduction">
                                    <Input v-model="formCompanyMes.introduction" size="large" clearable placeholder="请输入公司简介" autocomplete="off" type="textarea" :rows="5" />
                                </FormItem>
                                <FormItem label="上传证明材料" prop="introduction">
                                    <div>
                                        <span style="color: rgb(255, 0, 0)">加盖企业公章的</span>
                                        <span style="color: #1d8ce0">营业执照或统一社会信用代码证书，</span>
                                        <span>请使用</span>
                                        <span style="color: rgb(255, 0, 0)">jpg、png</span>
                                        <span>格式的图片。</span>
                                    </div>
                                    <div style="width: 420px; height: 200px" class="d-flex align-items-center">
                                        <div style="width: 200px; height: 200px">
                                            <img @click="imgOpen('@/assets/xytitle.png')" src="@/assets/xytitle.png" width="200px" />
                                        </div>
                                        <div style="width: 200px; height: 200px">
                                            <Upload multiple type="drag" action="">
                                                <div style="width: 200px; height: 200px; line-height: 200px; text-align: center">
                                                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                                </div>
                                            </Upload>
                                        </div>
                                    </div>
                                    <div>
                                        <span>请按要求上传以上证件，河南省大中专毕业生24365就业平台将参照您的材料为您进行审核，并在审核后后短信通知您。</span>
                                    </div>
                                </FormItem>
                                <Row>
                                    <Col class="flex-1 w-100" span="12" style="background-color: #afcbf3">入住高校</Col>
                                </Row>
                                <FormItem label="高校名称" prop="introduction">
                                    <Input v-model="formCompanyMes.introduction" size="large" clearable placeholder="请选择入住高校" autocomplete="off" />
                                </FormItem>
                                <FormItem label="招聘专业" prop="introduction">
                                    <Input v-model="formCompanyMes.introduction" size="large" clearable placeholder="请选择招聘专业" autocomplete="off" />
                                </FormItem>
                                <FormItem label="入住高校理由" prop="introduction">
                                    <Input v-model="formCompanyMes.introduction" size="large" clearable autocomplete="off" type="textarea" :rows="5" maxlength="200" show-word-limit />
                                </FormItem>
                                <FormItem>
                                    <Button :loading="loading" style="width: 100%" type="primary" @click.native="clickCompanyInfo" size="large">下一步</Button>
                                </FormItem>
                            </Form>
                        </div>
                        <div v-else-if="isShow == 2" class="leftCon_contentDiv">
                            <Form :model="formOperatorMes" ref="formPwd" :rules="rulesFormope" :label-width="80">
                                <FormItem style="margin-left: 220px">
                                    <Avatar v-model="formOperatorMes.avatar" icon="ios-person" size="75" />
                                    <Upload :action="uploadFileUrl">
                                        <Button icon="ios-cloud-upload-outline">上传</Button>
                                    </Upload>
                                </FormItem>
                                <FormItem style="margin-left: 130px">
                                    <div>点击上传用户头像，像素：200*200px,格式：jpg,png</div>
                                </FormItem>
                                <FormItem label="真实姓名">
                                    <Input v-model="formOperatorMes.name" size="large" clearable placeholder="输入与身份证一致的名字" autocomplete="off" />
                                </FormItem>
                                <FormItem label="性别">
                                    <RadioGroup v-model="formOperatorMes.specularExponent">
                                        <Radio label="man">男</Radio>
                                        <tab-pane></tab-pane>
                                        <Radio label="woman">女</Radio>
                                    </RadioGroup>
                                </FormItem>
                                <FormItem label="公司名称">
                                    <Input v-model="formOperatorMes.company" size="large" clearable placeholder="输入公司名称" autocomplete="off" value="123" />
                                </FormItem>
                                <FormItem label="所在部门">
                                    <Input v-model="formOperatorMes.part" size="large" clearable placeholder="输入就职部门名称" autocomplete="off" value="123" />
                                </FormItem>
                                <FormItem label="担任的职位">
                                    <Input v-model="formOperatorMes.pos" size="large" clearable placeholder="输入您担任的职位" autocomplete="off" value="123" />
                                </FormItem>
                                <FormItem label="工作邮箱">
                                    <Input v-model="formOperatorMes.email" size="large" clearable placeholder="输入您工作所用的邮箱" autocomplete="off" value="123" />
                                </FormItem>
                                <FormItem label="工作电话">
                                    <Input v-model="formOperatorMes.tel" size="large" clearable placeholder="工作电话与传真至少填写一项" autocomplete="off" value="123" />
                                </FormItem>
                                <FormItem label="传真">
                                    <Input v-model="formOperatorMes.fax" size="large" clearable placeholder="工作电话与传真至少填写一项" autocomplete="off" value="123" />
                                </FormItem>
                                <FormItem label="上传证明材料" prop="introduction">
                                    <div>
                                        <span style="color: rgb(255, 0, 0)">经办人手持个人有效身份证明(如身份证)的照片</span>
                                        <span style="color: #1d8ce0">，</span>
                                        <span>请使用</span>

                                        <span style="color: rgb(255, 0, 0)">jpg、png</span>
                                        <span>格式的图片。</span>
                                    </div>
                                    <Avatar shape="square" icon="ios-person" style="width: 200px; height: 200px"></Avatar>
                                    <Upload type="drag" style="display: inline-block; width: 200px; height: 200px">
                                        <div style="padding: 20px 0">
                                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                            <p>Click or drag files here to upload</p>
                                        </div>
                                    </Upload>
                                </FormItem>
                                <FormItem label="上传授权公函" prop="empower">
                                    <div>
                                        <span style="color: rgb(255, 0, 0)">加盖企业公章的</span>
                                        <span style="color: #1d8ce0">授权公函文件，</span>
                                        <span>请使用</span>
                                        <span style="color: rgb(255, 0, 0)">jpg、png</span>
                                        <span>格式的图片。</span>
                                    </div>
                                    <Avatar shape="square" icon="ios-person" style="width: 200px; height: 200px"></Avatar>
                                    <Upload type="drag" style="display: inline-block; width: 200px; height: 200px">
                                        <div style="padding: 20px 0">
                                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                            <p>Click or drag files here to upload</p>
                                        </div>
                                    </Upload>
                                </FormItem>
                                <FormItem>
                                    <div>
                                        <Button style="width: 50%; background-color: #ffd1b2" @click.native="getList" size="large">上一步</Button>
                                        <Button style="width: 50%" type="primary" @click.native="clickLast" size="large">确认</Button>
                                    </div>
                                </FormItem>
                            </Form>
                        </div>
                        <div v-else-if="3" class="leftCon_contentDiv">
                            <div class="leftCon_contentDiv_con">
                                <Icon type="md-checkmark-circle" />
                            </div>
                            <h2 class="leftCon_contentDiv_con">认证信息提交成功</h2>
                            <div class="leftCon_contentDiv_con">我们将在2个工作日内为您完成认证,并在认证后给您发短信通知。</div>
                            <div class="leftCon_contentDiv_con">
                                <Button :loading="loading" style="width: 30%; background-color: #ff8e21" size="large">发布职位</Button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rightCon">
                    <div>注册须知：</div>
                    <div>1、注册资料准备：加盖公章的营业执照复印件、单位logo图片（仅支持jpg，png，gif，jpeg格式的图片），请提前准备。</div>
                    <div>
                        2、无营业执照的单位请上传其他相关证件，如工商登记证、组织机构代码证、事业单位法人证书、社会团体法人证书、办学许可证、民办非企业单位登记证书、司法鉴定许可证等其他包含单位名称与相关代码的证件。
                    </div>
                    <div>3、单位名称和统一社会信用代码必须正确，系统会与全国统一社会信用代码库校验，不一致则无法注册。</div>
                </div>
            </div>
        </div>
        <!--图片弹窗-->
        <Modal v-model="modal1" style="width: 400px">
            <img alt="" :src="modelSrc" width="350px" />
        </Modal>
    </div>
</template>
<script>
import { vaptchaID, vaptchaOffline, sendResetSms, resetByMobile, sendResetEmail, resetByEmail, deleteAllRedis, sendActivationCode } from '@/api/index';
import { uploadFile } from '@/api/index';
import { validateMobile } from '@/libs/validate';
import CountDownButton from '@/views/my-components/xboot/count-down-button.vue';
import SetPassword from '@/views/my-components/xboot/set-password.vue';
import uploadPicInput from '@/views/my-components/xboot/upload-pic-input.vue';

export default {
    name: 'EnterpriseRegist',
    components: { uploadPicInput, SetPassword, CountDownButton },
    data() {
        return {
            modal1: false,
            modelSrc: '',
            comIndustryList: [
                {
                    code: 'New York',
                    displayName: 'New'
                }
            ],
            NetsignedIndustryList: [
                {
                    code: 'New York',
                    displayName: 'New'
                }
            ],
            BusinesAreaList: [
                {
                    code: 'New York',
                    displayName: 'New'
                }
            ],
            UnitTypeList: [
                {
                    code: 'New York',
                    displayName: 'New'
                }
            ],
            UnitNatureList: [
                {
                    code: 'New York',
                    displayName: 'New'
                }
            ],
            uploadFileUrl: uploadFile,
            isShow: 0, //模块
            loading: false, //提交按钮加载
            // 企业账号表单
            form: {
                password: '',
                copyPwd: '',
                mobile: '',
                code: ''
            },
            rulesForm: {
                password: [
                    {
                        required: true,
                        message: '密码不能为空',
                        trigger: 'change'
                    }
                ],
                copyPwd: [
                    {
                        required: true,
                        message: '确认密码不能为空',
                        trigger: 'blur'
                    }
                ],
                mobile: [
                    {
                        required: true,
                        message: '手机号不能为空',
                        trigger: 'blur'
                    },
                    {
                        validator: validateMobile,
                        trigger: 'change'
                    }
                ],
                code: [
                    {
                        required: true,
                        message: '验证码不能为空',
                        trigger: 'blur'
                    }
                ]
            },
            formCompanyMes: {
                // avatar:'',//头像
                // name: '',
                // codeNum: '',
                // comIndustry:'',// 公司行业
                // NetsignedIndustry:'',//网签行业
                // BusinesArea:'',//业务领域
                // UnitType:'',//单位类型
                // UnitNature:'',//单位性质
                // NumEmploye:'',//员工数量
                // local1:'',//地址1
                // local2:'',//地址2
                // address:'',//地址
                // netAddress:'',//网址
                // introduction:'',//简介
                // materialURL:''//材料地址
            },
            formOperatorMes: {},
            rulesFormCom: {
                name: [
                    {
                        required: true,
                        message: '单位名称不能为空',
                        trigger: 'blur'
                    }
                ],
                codeNum: [
                    {
                        required: true,
                        message: '统一社会信用代码不能为空',
                        trigger: 'blur'
                    }
                ],
                selectItem: [
                    {
                        required: true,
                        trigger: 'blur'
                    }
                ],
                NumEmploye: [
                    {
                        required: true,
                        message: '员工数量不能为空',
                        trigger: 'blur'
                    }
                ]
            },
            rulesFormope: {},
            // 阅读同意
            readUserAgree: false
        };
    },
    mounted() {
        this.getSelectData();
    },
    methods: {
        imgOpen: function (src) {
            this.modal1 = true;
            this.$nextTick(() => {
                this.modelSrc = src;
            });
        },
        getSelectData() {},
        showVaptcha() {
            this.erro = 0;
            var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if (!reg.test(this.form.mobile)) {
                this.errorMobile = '手机号格式错误';
                return;
            } else {
                this.errorMobile = '';
                this.onOk();
            }
            // this.vaptchaObject.validate(); // 若没验证验证码 开始验证
        },
        onOk() {
            debugger;
            this.sending = true;
            this.getSms = '发送中';
            let obj = {
                mobile: this.form.mobile,
                school: '企业',
                bynx: new Date(this.form.bynx).getFullYear(),
                idCard: this.form.idCard
            };
            sendActivationCode(obj).then(res => {
                debugger;
                this.getSms = '获取验证码';
                this.sending = false;
                // this.vaptchaObject.reset();
                if (res.result.code === 200) {
                    // this.$refs.fileUrlUploadFiles.setData();
                    this.$Message.success('发送短信验证码成功');
                    // // 开始倒计时
                    // this.$refs.countDown.startCountDown();
                } else {
                    // this.$Message.error("未查询到您的学籍信息，请检查输入的信息是否正确，如果正确请联系学校就业部门！");
                    this.erro = 2;
                    this.errotext = res.result.message;
                }
            });
        },
        biyes() {
            // this.modal = true
            window.open('/agreement', '_blank');
            // this.$router.push('/agreement')
        },
        // 勾选同意书
        changeCheck(e) {
            this.readUserAgree = e;
        },
        getlist() {
            console.log(this.formCompanyMes.comIndustry);
        },
        //获取企业账户信息
        async getList() {
            console.log(this.form);
            if (this.readUserAgree) {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.postRequest('/bysPersonInfo/getInfoForActivate', this.form).then(res => {
                            console.log(res);
                            if (res.success) {
                                this.loading = false;
                                this.studentForm = res.result;
                                this.studentForm.zyCode = res.result.zy;
                                // 第三步数据回显
                                this.formPwd.cssj = res.result.cssj;
                                this.formPwd.email = res.result.email;
                                this.formPwd.qq = res.result.qq;
                                this.formPwd.szdq = res.result.szdq;
                                this.formPwd.jtdz = res.result.jtdz;
                                this.formPwd.jtdh = res.result.jtdh;
                                this.formPwd.jtyb = res.result.jtyb;
                                this.formPwd.mobile = this.form.mobile;
                                this.isShow = '1';
                            } else {
                                this.loading = false;
                            }
                        });
                    }
                });
            } else {
                // this.$Message.error('请勾选服务协议！');
                this.$Message.error({
                    duration: 5,
                    content: '请勾选服务协议！',
                    closable: true
                });
            }
        },
        clickCompanyInfo() {
            this.isShow = '2';
            /*      this.infoFixVo = []
            this.$Modal.confirm({
              title: "确认提交",
              content: "确认个人信息提交！",
              onOk: () => {
                let hasCheck = false
                this.infoFixVo = []
                for (let key in this.studentInfo) {
                  //只要勾选一个就可以提交
                  if (this.studentInfo[key].checkTrue) {
                    hasCheck = true
                    let infoFix = {
                      personInfoId: this.studentForm.id,
                      errorColumnName: this.studentInfo[key].name,
                      errorColumn: this.studentInfo[key].value,
                      oldValue: this.studentForm[key],
                      newValue: this.copyStudentForm[key],
                      zmcl: this.form.zmcl,
                      isSelect: this.studentInfo[key].isSelect
                    }
                    this.infoFixVo.push(infoFix)
                  }

                }
                if (!hasCheck){
                  this.isShow = '2';
                  return;
                }
                if (this.infoFixVo.length !== 0 && this.form.zmcl === ''){
                  this.$Message.info("请上传证明材料！")
                  return
                }
                this.loading = true
                postBodyRequest("/bysPersonInfo/updateInfoForActivate", this.infoFixVo).then(res => {
                  this.loading = false
                  if (res.success) {
                    this.$Message.success("操作成功");
                    this.isShow = '2'
                  }
                });
              },
            });*/
        },
        clickLast() {
            this.isShow = '3';
        }
    }
};
</script>

<style scoped lang="less">
@import './EnterpriseRegist.less';
</style>
